<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--
         删除|构建元素
        -->
        <h1 v-if="show">
            内容  if
        </h1>

        <!--
         隐藏或者显示元素
         display: none 隐藏
        <h1 style="display: none;">
            内容  show
        </h1>

        -->
        <h1 v-show="show">
            内容  show
        </h1>

        <hr>
        <input v-model="score">
        <h1 v-if="score>=90">
            优秀
        </h1>
        <h1 v-else-if="score>=80">
            优
        </h1>
        <h1 v-else-if="score>=70">
            良好
        </h1>
        <h1 v-else-if="score>=60">
            合格
        </h1>
        <h1 v-else>
            差
        </h1>



    </div>


    <script>
       // document.getElementById("app").innerHtml="";

        //1,构建Vue实例
        var app =  new Vue({
            el:"#app",//容器的id
            data:{ //定义数据
                show:true,
                score:90
            }
        });

    </script>

</body>
</html>